<template>
  <el-dialog :visible="visible" title="新增品牌" width="800px" @close="handleClose">
    <div class="wrap">
      <div class="content">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item prop="name" label="品牌名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="logo图" prop="courseTitleImage">
            <el-upload
              class="avatar-uploader"
              :action="actionUrl + '?fileType=2&businessType=2'"
              :show-file-list="false"
              :on-success="uploadSuccess"
              >
              <img v-if="form.courseTitleImage" :src="form.courseTitleImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" :min="0" :controls="false"></el-input-number>
          </el-form-item>
          <el-form-item prop="introduction" label="介绍信息">
            <el-input v-model="form.introduction" type="textarea"></el-input>
          </el-form-item>
          <el-form-item prop="memo" label="备注">
            <el-input v-model="form.memo" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: ['visible'],
    data () {
      return {
        actionUrl: '',
        form: {
          name: '',
          courseTitleImage: '',
          sort: '',
          introduction: '',
          memo: '',
        }
      }
    },
    activated() {
      this.actionUrl = this.$api.upload()
      this.$refs.form.resetFields()
    },
    created() {
      this.actionUrl = this.$api.upload()
    },
    methods: {
      uploadSuccess(res, file) {
        console.log(res)
        this.form.courseTitleImage = res.data.totalUrl
      },
      onSubmit(){
        this.$api.brand.add(this.form).then(res => {
          if(res.success){
            this.$message.success('保存成功')
            this.$emit('save', true)
          }
        })
      },
      handleClose(){
        this.form = {},
        this.$emit('update:visible', false)
      }
    }
  }
</script>

<style>

 
</style>
